<!--
 * @files.autoSave: off
 * @git.path: C:\Program Files\Git\cmd\git.exe
-->
<!--
 * @files.autoSave: off
 * @git.path: C:\Program Files\Git\cmd\git.exe
-->
<template>
    <div class="Role">
        <div class="header">
         <el-select v-model="onlineStatus" clearable placeholder="请选择设备在线状态">
    <el-option
      label="离线"
      value="离线">
    </el-option>
        <el-option
      label="在线"
      value="在线">
    </el-option>
     </el-select>
    <el-select v-model="bdStatus" clearable placeholder="请选择设备绑定状态" style="margin:0 10px">
    <el-option
      v-for="item in bdStatuOpt"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
  <el-input
  placeholder="请输入内容"
  v-model="inputValue"
  clearable style="width:180px">
</el-input>
  <el-button type="success" style="margin:0 10px">搜索</el-button>
  <el-button type="success" style="float:right" @click="showDrawer">录入</el-button>
 </div>

<!-- 表格 -->
  <el-table
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column
      type='index' :index='1' label="序号" width="90" align='center'>
      <!-- <template slot-scope="scope">
          {{scope.row.index}}
      </template> -->
    </el-table-column>
        <el-table-column
      prop="serial_number" label="编号" min-width="100" align='center'>
    </el-table-column>
        <el-table-column
      prop="name" label="名称" min-width="100" align='center'>
    </el-table-column>
        <el-table-column
      prop="online_status" label="在线状态" min-width="100" align='center'>
      <template slot-scope="scope">
          <el-tag type="danger" v-if="scope.row.online_status == 0">
          {{scope.row.online_status == 0 ? '离线':'在线'}}</el-tag>
           <el-tag type="success" v-if="scope.row.online_status == 1">
          {{scope.row.online_status == 0 ? '离线':'在线'}}</el-tag>
      </template>
      
    </el-table-column>
        <el-table-column
      prop="bind_status" label="绑定状态" min-width="100" align='center'>
      <template slot-scope="scope">
          <el-tag type="danger" v-if="scope.row.bind_status == 0">{{scope.row.bind_status == 0 ? '未绑定':'已绑定'}}</el-tag>
          <el-tag type="success" v-if="scope.row.bind_status == 1">{{scope.row.bind_status == 0 ? '未绑定':'已绑定'}}</el-tag>
      </template>
    </el-table-column>
        <el-table-column
      prop="date" label="操作" min-width="150" align='center'>
      <template slot-scope="scope">
        <el-button type="text" @click="editBtn(scope.row)">修改</el-button>
        <el-button type="text" @click="deleteBtn(scope.row.id)" style="color:red">删除</el-button>
      </template>
    </el-table-column>
 
  </el-table>
<!-- 抽屉 -->
  <el-drawer
  :title="title"
  :visible.sync="drawer"
   direction="rtl"
  :before-close="handleClose" size="50%">
  <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="编号" prop="serial_number">
    <el-input v-model="ruleForm.serial_number" style="width:200px"></el-input>
  </el-form-item>
  <el-form-item label="名称" prop="name">
    <el-input v-model="ruleForm.name" style="width:200px"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button @click="drawer =false ">取消</el-button>
    <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
    <el-button @click="resetForm('ruleForm')">重置</el-button>

      </el-form-item>
  </el-form>
</el-drawer>
    </div>

</template>
<script>

import { get,postJSON,del } from "../../utils/request";
    export default{
        data(){
            return{
                onlineStatus:'',
                bdStatus:'',
                bdStatuOpt:[{
                    lable:'未绑定',
                    value:'未绑定'
                },
                {  lable:'已绑定',
                    value:'已绑定'}],
                    inputValue:'',
                    tableData:[],
                    drawer:false,
                    ruleForm:{
                        name:'',
                        serial_number:'',
                        id:''
                    },
                    rules:{
                        name:[
                            
            { required: true, message: '请输入名称', trigger: 'blur' },
                        ],
                        serial_number:
                            [ 
                            
            { required: true, message: '请输入编号', trigger: 'blur' },
                        ]
                        
                    },
                    title:''
            }

        },
        created(){
         this.getDeviceList()
        },

        methods:{
//查询设备列表

            getDeviceList(){
                get('device/pageQuery',{
                    page:1,
                    pageSize:10,
                    name:'',
                    bind_status:'',
                    online_status:'',
                }).then(res=>{
                    console.log(9,res);
                    if(res && res.status == 200 && res.data && res.data.list){
                    this.tableData = res.data.list
                    }else{
                        this.tableData = []
                    }
                })
            },


        //修改设备信息
        editBtn(row){
            console.log(897,row);
            this.drawer = true
            this.title= '修改设备信息'
            this.ruleForm={
                serial_number:row.serial_number,
                name:row.name,
                id:row.id
            }
        },

        // 保存更新设备
            addDevice(){
                postJSON('/device/saveOrUpdate',this.ruleForm).then(res=>{
                   console.log(88,res);
                })
            },

            //删除信息
            deleteBtn(id){
                del('/device/deleteById',{
                    id:id
                }).then(res=>{
                console.log(9998987,res);
                if(res && res.status == 200){
                     this.$notify({
                        title: '成功',
                        message: '设备信息删除成功',
                        type: 'success'
                         });
                         this.getDeviceList()
                }else{
                     this.$notify.error({
                        title: '错误',
                        message: '设备信息删除失败'
                         });
                }
                })
            },
            
// 打开抽屉
        showDrawer(){
        this.drawer = true
       
            this.title="添加设备信息"
        
        this.ruleForm={}
        this.$refs['ruleForm'].resetFields();
         },

            //关闭抽屉
         handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },


      //提交
        submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            postJSON('/device/saveOrUpdate',this.ruleForm).then(res=>{
                   console.log(888888,res);
                   if(res && res.status == 200){

                       if(this.ruleForm.id){
                        this.$notify({
                        title: '成功',
                        message: '设备信息修改成功',
                        type: 'success'
                         });
                       }else{
                        this.$notify({
                        title: '成功',
                        message: '设备信息添加成功',
                        type: 'success'
                        });
                       }
                       

                        this.drawer = false
                        this.getDeviceList()
                   }else{
                          this.$notify.error({
                            title: '错误',
                            message: '设备信息添加失败'
                            });
                   }
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
        }
    
</script>

<style lang="scss"  scoped>
.Role{
    padding:5px;
    .header{
        margin-bottom:10px ;
    }
}



</style>